import React, { Component } from 'react';
import { Field } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';

import {
  Select,
  Col,
  TextField,
  Row,
} from '@folio/stripes/components';

class CafeTableTwo extends Component {
  render() {
      const {
          intl
      } = this.props;
    return (
      <Row style={{ width: '50%' }} center="xs">
        <Col xs={12}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.propertyName" />
                        }
            component={Select}
            name="propertyName"
            required
            dataOptions={this.props.ascriptionList}

          />
        </Col>

        <Col xs={12}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.category" />
                        }
            component={Select}
            name="category"
            required
            dataOptions={[
                {
                    id: '0',
                    value: '',
                    label: intl.formatMessage({ id: 'ui-party.please.select' })+intl.formatMessage({id:'ui-party.loans.columns.party.category'})
                },
                {
                    id:'1',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.party.needReserveAndNotApproval' }),
                    value: 1
                },
                { id:'2',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.party.needReserveAndNeedApproval' }),
                    value: 2
                },
                {
                    id:'3',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.party.notReserveAndNotApproval' }),
                    value: 3
                }
            ]}
          />
        </Col>
        <Col xs={12}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.venue" />
                        }
            component={Select}
            name="venue"
            required
            dataOptions={this.props.venueList}
          />
        </Col>
        <Col xs={12}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.facilities" />
                        }
            component={Select}
            name="facName"
            dataOptions={this.props.facilitiesList}
          />
        </Col>
        <Col xs={12}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.deviceCount" />
                        }
            component={TextField}
            name="facCount"
            placeholder={intl.formatMessage({ id: 'ui-party.please.input' })+intl.formatMessage({id:'ui-party.loans.columns.party.deviceCount'})}
            hasClearIcon
            type="number"
            min="1"
            max="9999"
          />
        </Col>
        <Col xs={12}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.status" />
                        }
            component={Select}
            name="status"
            required
            dataOptions={[
              {
                label: intl.formatMessage({ id: 'ui-party.please.select' })+intl.formatMessage({id:'ui-party.loans.columns.party.status'}),
                value: ''
              },
              {
                label:  intl.formatMessage({id:'ui-party.loans.columns.party.effective'}),
                value: 1
              },
              {
                label:   intl.formatMessage({id:'ui-party.loans.columns.party.noneffective'}),
                value: 0
              }
            ]}
          />
        </Col>
      </Row>
    );
  }
}

CafeTableTwo.propTypes = {};

export default CafeTableTwo;
